<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js_code/echarts.min_2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="css_code/main.css">
</head>
<style>

</style>
<body>
    <div class="bgc"></div>
    
    <!-- 头部标题 -->
    <div  id="head_logo_text">
        <img src="images/logo.png" id="head_logo">
        <span id="head_text">颐和之家安全守护控制中心</span>
    </div>

    <!-- 可视化地图 -->
    <div class="map_box">
        <div id="main_1"></div>
        <div class="position_1 position"></div>
        <div class="position_2 position"></div>
        <div class="position_3 position"></div>
        <div class="position_4 position"></div>
        <div class="position_5 position"></div>
        <div class="position_6 position"></div>
        <div class="position_7 position"></div>
        <div class="position_8 position"></div>
        <div class="position_9 position"></div>
        <div class="position_10 position"></div>
        <div class="position_11 position"></div>
        <div class="position_12 position"></div>
        <div class="position_13 position"></div>
        <div class="position_14 position"></div>
        <div class="position_15 position"></div>
        <div class="position_16 position"></div>
        <div class="position_17 position"></div>
        <div class="position_18 position"></div>
        <div class="position_19 position"></div>
        <div class="position_20 position"></div>
        <div class="position_21 position"></div>
        <div class="position_22 position"></div>
        <div class="position_23 position"></div>
        <div class="position_24 position"></div>
        <div class="position_25 position"></div>
        <div class="position_26 position"></div>
        <div class="position_27 position"></div>
        <div class="position_28 position"></div>
        <div class="position_29 position selected"></div>
        <div class="position_30 position"></div>
        <div class="position_31 position"></div>
        <div class="position_32 position"></div>
        <div class="position_33 position"></div>
        <div class="position_34 position"></div>
        <div class="position_35 position"></div>
    </div>

    <!-- 可视化数据图 -->
    <div class="visual_box">

    </div>

    <!-- 时间 -->
    <div id="time_read">
        <p>2023年7月10日</p>
        <p >114:514 </p>  <!-- 好臭的时间 - 活数据 -->
    </div>

    <!-- 检测地点：与检测数量 -->
    <div id="check_place_num">
        <p>监测地点：大连</p>
        <p>监测数量：1235</p>
    </div>



<!-- 以及地图右下角的数据变化 -->
<div id="change_blood">
    <div class="user_box">
        <p id="round"></p>
        <p class="user_name">张**</p>
        <p class="state">正常</p>
    </div>
    <div id="body_check">
        <div>心率:
            <span>88bpm</span>
        </div>
        <div>血压:
            <span>93/80mmhg</span>
        </div>
        <div>步数:
            <span>1084</span>
        </div>
        <div>体温:
            <span>36.8</span>
         </div>
    </div>
    <div class="contact">一键呼叫紧急联系人</div>
</div>

<!-- 天气可视化图 -->
<div id="echar_pics">
    <div id="main_2"></div>
    <div id="main_3"></div>
    <div id="he-plugin-standard"></div>
    <div class="pie_box">
        <div id="main_4"></div>
        <div id="main_5"></div>
    </div>

</div>

</body>
<script src="js_code/main.js"></script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

<script>
const positions = document.querySelectorAll('.position');
positions.forEach(function(position, index){
    position.addEventListener('mouseenter', function(){
        this.style.backgroundImage = 'url(images/绿色坐标.gif)';
    });

    position.addEventListener('mouseleave', function(){
        // 在鼠标离开时，只有非选中的坐标才会变为红色
        if (!this.classList.contains('selected')) {
            this.style.backgroundImage = 'url(images/红色坐标.gif)';
        }
    });

    position.addEventListener('click', function(){
        // 将所有坐标恢复为红色并移除选中状态
        positions.forEach((pos) => {
            pos.style.backgroundImage = 'url(images/红色坐标.gif)';
            // 移除之前被选中的坐标的类名
            pos.classList.remove('selected');
        });

        // 将点击的坐标变为绿色，并添加选中状态(selecer类名)
        this.style.backgroundImage = 'url(images/绿色坐标.gif)';
        this.classList.add('selected');

        // 随机选择一个名字
        const randomName = name_arr[Math.floor(Math.random() * name_arr.length)];

        // 将随机选择的名字渲染到检测盒子中
        const userName = document.querySelector('.user_name');
        userName.innerHTML = randomName;
        
        // 生成随机步数
        const randomSteps = Math.floor(Math.random() * 4000);

        // 将随机步数渲染到检测盒子中
        const steps = document.querySelector('#body_check div:nth-child(3) span');
        steps.textContent = randomSteps;

       // 立即更新数据
        updateData();
    });
});

// 39个姓
name_arr = [
    '王**','李**','赵**','张**','刘**','陈**','杨**','吴**','黄**','朱**','孙**','郭**','胡**','吕**','高**','王、宋**','徐**','程**','林**','郑**','范**','何**','韩**','曹**','马**','许**','田**','冯**','杜**','周**','曾**','汪**','苏**','董**','梁**','石**','谢**'
    ]








</script>

</html>